<template>
  <el-card shadow="never"
           :style="{'min-height': gadgetHeight + 'px', 'min-width':'800px',}"
           class="aui-card--fill noBgc border-0 bg-transparent overflow-hidden home">
    <div class="home__header">
      <div class="home__header--title">
        {{$t('custom.component.gadget.homePage.welcome')}}, {{user}}!
      </div>
      <div class="home__header--desc">
        {{$t('custom.component.gadget.homePage.profit')}}
      </div>
    </div>

    <el-tabs v-model="activeName"
             @tab-click="handleClick"
             :stretch="true"
             :class="['home__tab',`home__tab-active--${activeName}`]">
      <el-tab-pane name="first">
        <template v-slot:label>
          <div class="home__tab__header home__tab__header--icon flex flex-col  items-start">
            <span class="home__tab__header--title">1. {{$t('custom.component.gadget.integration')}}</span>
            <span class="home__tab__header--desc">{{$t('custom.component.gadget.diversified')}}</span>
          </div>
        </template>
        <div class="flex flex-col home__tab__content home__tab__content-first ">
          <div class="home__tab__content-first-top flex justify-between items-start bg-white">
            <div class="home__tab__content-first-top__left flex flex-col items-start flex-1">
              <span class="article--title">{{$t('custom.component.gadget.integrationsText')}}</span>
              <span class="article--desc">{{$t('custom.component.gadget.glanceText')}}</span>
            </div>
            <div class="home__tab__content-first-top__right">
              <div class="card-item">
                <img :src="$ossLink+'/app/mspbots_theme_icon/homepage/provide.png'">
                <span class="card-item--num">{{homePageCount.provide}}</span>
                <span class="card-item--text">{{$t('custom.component.gadget.provide')}}</span>
              </div>
              <div class="card-item">
                <img :src="$ossLink+'/app/mspbots_theme_icon/homepage/connected.png'">
                <span class="card-item--num">{{homePageCount.provide}}</span>
                <span class="card-item--text">{{$t('custom.component.gadget.provide')}}</span>
              </div>
              <div class="card-item">
                <img :src="$ossLink+'/app/mspbots_theme_icon/homepage/to_be_connected.png'">
                <span class="card-item--num">{{homePageCount.provide}}</span>
                <span class="card-item--text">{{$t('custom.component.gadget.provide')}}</span>
              </div>
            </div>
          </div>
        </div>

      </el-tab-pane>
      <el-tab-pane name="second">
        <template v-slot:label>
          <div class="home__tab__header home__tab__header--icon flex flex-col  items-start">
            <span class="home__tab__header--title">2. {{$t('custom.component.gadget.dataAnaly')}}</span>
            <span class="home__tab__header--desc">{{$t('custom.component.gadget.flexible')}}</span>

          </div>
        </template>

        <div class="flex  home__tab__content home__tab__content-second bg-white">
          <div class="home__tab__content-second__left">
            <div class="article--title">{{$t('custom.component.gadget.customAnalysis')}}</div>
            <div class="article--desc"
                 style="padding-bottom:32px">{{$t('custom.component.gadget.kpisText')}}</div>
            <div class="card-item"
                 @click="clickHandler('dataset')"
                 :class="showValue==='dataset'?'border_style': ''">
              <img :src="$ossLink+'/app/mspbots_theme_icon/homepage/dataset.png'">
              <span class="card-item--num">{{homePageCount.dataset_count}}</span>
              <span class="card-item--text">{{$t('custom.component.gadget.dataset')}}</span>
            </div>
            <div class="card-item"
                 @click="clickHandler('widget')"
                 :class="showValue==='widget'?'border_style': ''">
              <img :src="$ossLink+'/app/mspbots_theme_icon/homepage/widget.png'">
              <span class="card-item--num">{{homePageCount.widget_count}}</span>
              <span class="card-item--text">{{$t('custom.component.gadget.homePage.widget')}}</span>
            </div>
            <div class="card-item"
                 @click="clickHandler('report')"
                 :class="showValue==='report'?'border_style': ''">
              <img :src="$ossLink+'/app/mspbots_theme_icon/homepage/report.png'">
              <span class="card-item--num">{{homePageCount.report_count}}</span>
              <span class="card-item--text">{{$t('custom.component.gadget.homePage.report')}}</span>
            </div>
          </div>
          <div class="home__tab__content-second__right">
            <div class="home__tab__content-second__right--tip">
              <span style="font-weight:600">
                {{whatHandler}}
              </span>
              &nbsp;&nbsp;&nbsp;
              <span>{{desStr}}</span>
            </div>
            <tabsComponent ref="tabsComponent"
                           :recentDataList="recentDataList"
                           :mostDataList="mostDataList"
                           :configScript="configScript"></tabsComponent>
          </div>
        </div>

      </el-tab-pane>

      <el-tab-pane name="third">
        <template v-slot:label>
          <div class="home__tab__header home__tab__header--icon flex flex-col  items-start">
            <span class="home__tab__header--title">3. {{$t('custom.component.gadget.automation')}}</span>
            <span class="home__tab__header--desc">{{$t('custom.component.gadget.collaboration')}}</span>
          </div>
        </template>

        <div class="flex flex-col bg-white  home__tab__content home__tab__content-third">
          <div class="home__tab__content-third__top flex justify-between">
            <div class="home__tab__content-third__top__left flex-1 ">
              <div class="article--title">{{$t('custom.component.gadget.automationsConfig')}}</div>
              <div class="article--desc">{{$t('custom.component.gadget.automations')}}</div>
            </div>
            <div class="home__tab__content-third__top__right">
              <div class="card-item">
                <img :src="$ossLink+'/app/mspbots_theme_icon/homepage/owned.png'">
                <span class="card-item--num">{{homePageCount.bot_count}}</span>
                <span class="card-item--text">{{$t('custom.component.gadget.owned')}}</span>
              </div>
              <div class="card-item">
                <img :src="$ossLink+'/app/mspbots_theme_icon/homepage/running.png'">
                <span class="card-item--num">{{homePageCount.bot_use_count}}</span>
                <span class="card-item--text">{{$t('custom.component.gadget.runnings')}}</span>
              </div>
            </div>
          </div>
          <div class="home__tab__content-third__top  ">
            <tabsComponent :recentDataList="botRecentDataList"
                           :mostDataList="botMostDataList"
                           :configScript="botConfigScript"></tabsComponent>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"
           :slicer='slicer' />

    <div class="home__tab__content-first-bottom bg-white">
      <Integration :isHomePage="true"
                    style="margin:0;padding:0"></Integration>
    </div>
  </el-card>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import tabsComponent from './component/tabsComponent.vue'
import { defaultGadgetSettingList } from '@/utils/data-json'
import Integration from '@/views/modules/mspbots/Integrations/index.vue'
export default ({
  mixins: [mixinGadgetViewModule],
  components: { tabsComponent, Integration, model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      dataLoading: false,
      countLoading: false,
      user: this.$store.state.user.name,
      homePageCount: {},
      connectorInfo: {},
      connectorInfoCount: {
        provide: null,
        connected: null,
        toBeConnected: null
      },
      dataSource: [],
      dataList: {},
      gadgetSetting: null,
      loading: false,
      nowSteps: this.$store.state.GetStarted.steps,
      getStartedDialogStatus: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'homepagegadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'homepagegadget' }).gadgetSetting
        }
      },
      activeName: 'first',
      showValue: 'dataset',
      configScript: {
        id: 'id',
        name: 'name',
        status: 'status',
        description: 'description',
        businessType: 'businessType',
        icon: 'icon',
        botNum: 'botNum',
        modelNum: 'modelNum',
        integration: 'integration',
        createDate: 'createDate',
        creatorName: 'creatorName',
        updateDate: 'updateDate',
        updateByName: 'updateByName',
        lastSyncDate: 'lastSyncDate',
        ownerName: 'ownerName',
        Permission: 'dataset'
      },
      datasetConfigScript: {
        id: 'id',
        name: 'name',
        status: 'status',
        description: 'description',
        businessType: 'businessType',
        icon: 'icon',
        botNum: 'botNum',
        modelNum: 'modelNum',
        integration: 'integration',
        createDate: 'createDate',
        creatorName: 'creatorName',
        updateDate: 'updateDate',
        updateByName: 'updateByName',
        lastSyncDate: 'lastSyncDate',
        ownerName: 'ownerName',
        Permission: 'dataset'
      },
      widgetConfigScript: {
        id: 'id',
        name: 'name',
        status: 'status',
        description: 'description',
        businessType: 'businessType',
        icon: 'icon',
        botNum: 'botNum',
        modelNum: 'reportNum',
        integration: 'integration',
        createDate: 'createDate',
        creatorName: 'creatorName',
        updateDate: 'updateDate',
        updateByName: 'updateByName',
        lastSyncDate: 'lastSyncDate',
        ownerName: 'ownerName',
        Permission: 'widget'
      },
      reportConfigScript: {
        id: 'id',
        name: 'name',
        status: 'status',
        description: 'description',
        businessType: 'businessType',
        icon: 'icon',
        // botNum: 'botNum',
        // modelNum: 'modelNum',
        integration: 'integration',
        createDate: 'createDate',
        creatorName: 'creatorName',
        updateDate: 'updateDate',
        updateByName: 'updateByName',
        lastSyncDate: 'lastSyncDate',
        ownerName: 'ownerName',
        Permission: 'report'
      },
      botConfigScript: {
        id: 'id',
        name: 'name',
        status: 'status',
        description: 'description',
        businessType: 'businessType',
        icon: 'integrationIcon',
        botNum: 'botNum',
        modelNum: 'modelNum',
        integration: 'integration',
        createDate: 'createTime',
        creatorName: 'creatorName',
        updateDate: 'updateTime',
        updateByName: 'updateByName',
        lastSyncDate: 'lastSyncDate',
        ownerName: 'ownerName',
        Permission: 'bots',
        read: 'read',
        ready: 'ready',
        received: 'received',
        enable: 'enable',
        alert: 'alert',
        escalation: 'escalation'
      },
      recentDataList: [],
      mostDataList: [],
      botRecentDataList: [],
      botMostDataList: []
    }
  },
  computed: {
    whatHandler () {
      var newStr = this.showValue.slice(0, 1).toUpperCase() + this.showValue.slice(1).toLowerCase()
      return `What is ${newStr}?`
    },
    desStr () {
      var str = ''
      if (this.showValue === 'dataset') {
        str = 'Datasets are made up of the unique data points pulled from your datasource. '
      } else if (this.showValue === 'widget') {
        str = 'Widgets are the visualization of various indicators that you produce to use in a Dashboard, Report, or possibly a Goal.'
      } else if (this.showValue === 'report') {
        str = 'Report supports the monitoring of all your most important indicators in one place, and can be shared with your customers to provide them with the information they need to make decisions.'
      }
      return str
    },
    requestEnd () {
      return !this.dataLoading && !this.countLoading
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
    this.getCount()
    this.getDataList()
    if (window.location.href === 'https://portal.mspbots.ai/home') {
      window.location.href = 'https://portal.mspbots.ai/portal'
    }
    if (window.location.href === 'https://portalint.mspbots.ai/home') {
      window.location.href = 'https://portalint.mspbots.ai/portal'
    }
  },
  watch: {
    requestEnd (val) {
      if (val) {
      }
    }
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      this.queryModelDefaultSetting.dataInfo.formSetting = {}
      var _self = this
      var obj = JSON.parse(JSON.stringify(this.slicer))
      for (var key in obj) {
        if (key === 'id') {
          delete obj.id
        }
      }
      var param = {
        ...obj,
        slicer: { ...this.slicer },
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr(),
        type: this.filterType
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        this.loading = false
        _self.verifyHasData(res)
        if (res.config) {
          _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
          _self.autoRefresh = _self.gadgetSetting.IsAutoRefresh
          if (_self.autoRefresh) {
            this.computedSyncTimer()
          }
          _self.conditionFormat = res.conditionFormat
        }
        if (res.name) {
          _self.widgetName = res.name
        } else {
          _self.widgetName = _self.gadgetSetting.headerTitle
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getDataList () {
      var params = {
        datasetKey: 'dfdsafopmjnyizdfndsdsfghgjfuyfsdgxcvb'
      }
      this.loading = true
      this.dataLoading = true
      this.$interface.reports.getDrillThroughDataInfo(params).then(({ data: res }) => {
        if (res.code !== 0) {
          // return this.$message.error(res.msg)
          this.loading = false
          return false
        }
        this.dataList.D_date = res.data.filter(item => item.type === 'D_date')
        this.dataList.D_count = res.data.filter(item => item.type === 'D_count')
        this.dataList.R_date = res.data.filter(item => item.type === 'R_date')
        this.dataList.R_count = res.data.filter(item => item.type === 'R_count')
        this.dataList.W_date = res.data.filter(item => item.type === 'W_date')
        this.dataList.W_count = res.data.filter(item => item.type === 'W_count')
        this.dataList.B_date = res.data.filter(item => item.type === 'B_date')
        this.dataList.B_count = res.data.filter(item => item.type === 'B_count')
        this.loading = false
      }).catch(() => {
        this.loading = false
      }).finally(() => {
        this.dataLoading = false
      })
    },
    getCount () {
      var params = {
        datasetKey: 'ewfzsdfzdsfasdfgsdftgaerfczjhmk'
      }
      this.countLoading = true
      // this.loading = true
      this.$interface.reports.getDrillThroughDataInfo(params).then(({ data: res }) => {
        if (res.code !== 0) {
          // return this.$message.error(res.msg)
          // this.loading = false
          return false
        }
        this.homePageCount = res.data[0]
        // this.loading = false
      }).catch(() => {
        // this.loading = false
      }).finally(() => {
        this.countLoading = false
      })
    },
    clickHandler (val) {
      this.showValue = val
      if (val === 'dataset') {
        this.configScript = this.datasetConfigScript
        this.recentDataList = this.dataList.D_date
        this.mostDataList = this.dataList.D_count
      } else if (val === 'widget') {
        this.configScript = this.widgetConfigScript
        this.recentDataList = this.dataList.W_date
        this.mostDataList = this.dataList.W_count
      } else if (val === 'report') {
        this.configScript = this.reportConfigScript
        this.recentDataList = this.dataList.R_date
        this.mostDataList = this.dataList.R_count
      }
      if (this.$refs.tabsComponent) {
        this.$refs.tabsComponent.tabsActiveName = 'recent'
      }
    },
    handleClick (val) {
      if (val.name === 'second') {
        if (this.showValue === 'dataset') {
          this.recentDataList = this.dataList.D_date
          this.mostDataList = this.dataList.D_count
        } else if (this.showValue === 'widget') {
          this.recentDataList = this.dataList.W_date
          this.mostDataList = this.dataList.W_count
        } else if (this.showValue === 'report') {
          this.recentDataList = this.dataList.R_date
          this.mostDataList = this.dataList.R_count
        }
      } else if (val.name === 'third') {
        this.botRecentDataList = this.dataList.B_date
        this.botMostDataList = this.dataList.B_count
      }
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
    }
  }

})
</script>

<style lang="scss" scoped>
.home {
  .home__tab__content-first-bottom {
    margin-top: 16px;
  }
  .article--title {
    font-size: 16px;
    color: #404040;
    height: 48px;
    line-height: 24px;
    font-weight: 600;
  }
  .article--desc {
    color: #404040;
    font-size: 14px;
    line-height: 20px;
  }

  .card-item {
    height: 48px;
    box-shadow: 0px 0px 8px 0px #f0f0f0;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    img {
      width: 48px;
      vertical-align: bottom;
      border-radius: 4px 0px 0px 4px;
    }
    &--num {
      display: inline-block;
      padding: 0 16px;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
    }
    &--text {
      color: #c0c0c0;
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
    }
  }

  &__header {
    padding-bottom: 32px;
    &--title {
      font-weight: 600;
      font-size: 24px;
      color: #404040;
      padding-bottom: 8px;
    }
    &--desc {
      font-size: 12px;
      color: #c0c0c0;
    }
  }

  &__tab {
    &-active--first {
      ::v-deep .el-tabs__nav::after {
        left: 0;
      }
    }
    &-active--second {
      ::v-deep .el-tabs__nav::after {
        left: 298px;
      }
    }
    &-active--third {
      ::v-deep .el-tabs__nav::after {
        left: 596px;
      }
    }
    &[class*="home__tab-active--"] {
      .home__tab__header {
      }
      ::v-deep .el-tabs__nav {
        & > .is-active {
          .home__tab__header--desc {
            color: #0050b3;
          }
        }
      }
    }

    ::v-deep & > .el-tabs__header {
      background-color: #fff;

      & > .el-tabs__nav-wrap {
        & > .el-tabs__nav-prev,
        & > .el-tabs__nav-next {
          visibility: hidden;
        }
        & > .el-tabs__nav-scroll {
          padding: 23px 32px 0;
          & > .el-tabs__nav {
            padding-bottom: 23px;
            & > .el-tabs__item:last-of-type {
              & > .home__tab__header {
                &::after {
                  display: none;
                }
              }
            }
            & > .el-tabs__active-bar {
              display: none;
            }
            &::after {
              content: "";
              position: absolute;
              transition: left 200ms;
              bottom: 0;
              width: 220px;
              height: 2px;
              background-color: #17b3a3;
              z-index: 1;
            }
            & > .el-tabs__item {
              padding: 0;
              height: auto;
              line-height: normal;
              max-width: 298px;
              min-width: 298px;
            }
          }
        }
      }
    }

    ::v-deep & > .el-tabs__content {
    }

    &__header {
      padding: 10px;
      position: relative;
      max-width: 220px;
      min-width: 220px;
      &--title {
        padding-bottom: 8px;
        font-size: 12px;
        color: #c0c0c0;
        text-align: left;
      }
      &--desc {
        font-weight: 600;
        font-size: 16px;
        text-align: left;
        color: #404040;
      }
      &--icon {
        &::after {
          color: #c0c0c0;
          font-size: 23px;
          content: "\e70d";
          font-family: "cuifont" !important;
          position: absolute;
          top: calc(50% - 12px);
          right: -51px;
          width: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    &__content {
      .home__tab__content-first-top {
        padding: 32px;
        &__left {
          padding-right: 32px;
        }
        &__right {
          width: 300px;
        }
      }
      &.home__tab__content-second {
        padding: 32px;
        .home__tab__content-second__left {
          padding-right: 32px;
          width: 300px;
        }
        .home__tab__content-second__right {
          &--tip {
            margin-bottom: 16px;
            background-color: #e6f7ff;
            font-size: 14px;
            color: #404040;
            line-height: 20px;
            padding: 12px 16px;
          }
        }
      }
      &.home__tab__content-third {
        padding: 32px;
        .home__tab__content-third__top__left {
          padding-right: 32px;
        }
        .home__tab__content-third__top__right {
          width: 300px;
        }
      }
    }
  }
}

.hover_style:hover {
  border: 1px solid #2693ff;
}
.border_style {
  border: 1px solid #2693ff;
}

.aui-card--fill{
  ::v-deep .el-card__body{
    padding: 12px 0 0;
  }
}
::v-deep .el-collapse {
  border: 0;
}
::v-deep .el-collapse-item__arrow {
  display: none;
}
</style>
